<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>BootStrap Demonstration</title>
</head>

<style>
    body {
        position: relative;
    }

    ul.nav-pills {
        top: 20px;
        position: fixed;
    }

    div.col-8 div {
        height: 500px;
    }
</style>
<!-- 添加滚动监听 -->

<body data-spy="scroll" data-target="#navbartop001" data-offset="150">
    <h1 id="网格布局">网格布局</h1>
    <!-- .container容器用于固定宽度，支持响应式布局的容器 -->
    <div class="container" style="background-color: lightblue; padding: 3px;">
        <h1>.container</h1>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col" style="background-color: coral;">.col</div>
            <div class="col" style="background-color: green;">.col</div>
            <div class="col" style="background-color: brown;">.col</div>
            <div class="col" style="background-color: coral;">.col</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-sm" style="background-color: coral;">.col-sm</div>
            <div class="col-sm" style="background-color: green;">.col-sm</div>
            <div class="col-sm" style="background-color: brown;">.col-sm</div>
            <div class="col-sm" style="background-color: coral;">.col-sm</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-lg" style="background-color: coral;">.col-lg</div>
            <div class="col-lg" style="background-color: green;">.col-lg</div>
            <div class="col-lg" style="background-color: brown;">.col-lg</div>
            <div class="col-lg" style="background-color: coral;">.col-lg</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-xl" style="background-color: coral;">.col-xl</div>
            <div class="col-xl" style="background-color: green;">.col-xl</div>
            <div class="col-xl" style="background-color: brown;">.col-xl</div>
            <div class="col-xl" style="background-color: coral;">.col-xl</div>
        </div>

    </div>
    <hr>
    <!-- .contaner-fluid容器适用于100%宽度 -->
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <h1>.container-fluid</h1>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col" style="background-color: coral;">.col</div>
            <div class="col" style="background-color: green;">.col</div>
            <div class="col" style="background-color: brown;">.col</div>
            <div class="col" style="background-color: coral;">.col</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-sm" style="background-color: coral;">.col-sm</div>
            <div class="col-sm" style="background-color: green;">.col-sm</div>
            <div class="col-sm" style="background-color: brown;">.col-sm</div>
            <div class="col-sm" style="background-color: coral;">.col-sm</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-md" style="background-color: coral;">.col-md</div>
            <div class="col-md" style="background-color: green;">.col-md</div>
            <div class="col-md" style="background-color: brown;">.col-md</div>
            <div class="col-md" style="background-color: coral;">.col-md</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-lg" style="background-color: coral;">.col-lg</div>
            <div class="col-lg" style="background-color: green;">.col-lg</div>
            <div class="col-lg" style="background-color: brown;">.col-lg</div>
            <div class="col-lg" style="background-color: coral;">.col-lg</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-xl" style="background-color: coral;">.col-xl</div>
            <div class="col-xl" style="background-color: green;">.col-xl</div>
            <div class="col-xl" style="background-color: brown;">.col-xl</div>
            <div class="col-xl" style="background-color: coral;">.col-xl</div>
        </div>
        <!-- 非等宽相应列 同一行是数字相加<=12 -->
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-md-1" style="background-color: coral;">.col-md-1</div>
            <div class="col-md-2" style="background-color: green;">.col-md-2</div>
            <div class="col-md-3" style="background-color: brown;">.col-md-3</div>
            <div class="col-md-4" style="background-color: coral;">.col-md-4</div>
            <div class="col-md-5" style="background-color: green;">.col-md-5</div>
            <div class="col-md-6" style="background-color: brown;">.col-md-6</div>
        </div>
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col-sm-2 col-md-4 offset-md-2" style="background-color: coral;">桌面03-06</div>
            <div class="col-sm-4 col-md-2 offset-md-1" style="background-color: brown;">桌面06-03</div>
        </div>
    </div>
    <hr>
    <h1 id="文字排版">文字排版</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <h1 class="display-1">display-1<small>更小的文字</small></h1>
        <h1 class="display-2">display-2<small>更小的文字</small></h1>
        <h1 class="display-3">display-3<small>更小的文字</small></h1>
        <h1 class="display-4">display-4<small>更小的文字</small></h1>
        <p>mark元素用于<mark>标记文字</mark>的背景和内边距<abbr title="为文字底部添加虚线">abbr元素</abbr></p>
        <blockquote class="blockquote">
            <p>千山鸟飞绝，万径人踪灭。<br>
                孤舟蓑笠翁，独钓寒江雪。
            </p>
            <footer class="blockquote-footer">柳宗元《江雪》</footer>
        </blockquote>
        <dl>
            <dt>蓑笠</dt>
            <dd>- 蓑衣和斗笠</dd>
            <dt>笠</dt>
            <dd>- 用竹篾编织的帽子</dd>
        </dl>
    </div>
    <hr>
    <h1 id="表格">表格</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <table class="table table-striped table-bordered table-hover table-sm">
            <tr>
                <th>表格参数</th>
                <th>说明</th>
                <th>其他</th>
            </tr>
            <tbody>
                <tr>
                    <td>table-striped</td>
                    <td>行内条纹</td>
                </tr>
                <tr>
                    <td>table-bordered</td>
                    <td>添加边框</td>
                </tr>
                <tr>
                    <td>table-hover</td>
                    <td>鼠标悬浮效果</td>
                </tr>
                <tr>
                    <td>table-dark</td>
                    <td>黑色背景</td>
                </tr>
                <tr>
                    <td>table-sm</td>
                    <td>较小的表格</td>
                </tr>
                <tr>
                    <td>table-responsive</td>
                    <td>自动出现水平滚动条</td>
                </tr>
            </tbody>
        </table>
    </div>
    <hr>
    <h1 id="图像形状">图像形状</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="" alt="普通图片" />
        <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded" alt="圆角图片" />
        <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="rounded-circle" alt="椭圆图片" />
        <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-thumbnail" alt="缩略图片" />
        <img src="https://static.runoob.com/images/mix/cinqueterre.jpg" class="img-fluid" alt="响应式图片" />
    </div>
    <hr>
    <h1 id="按钮">按钮</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <button type="button" class="btn-outline">基础按钮</button>
        <button type="button" class="btn btn-primary">主要按钮</button>
        <button type="button" class="btn btn-secondary">次要按钮</button>
        <button type="button" class="btn btn-link">链接按钮</button>
        <a href="#" class="btn btn-info">链接按钮</a>
        <input type="button" class="btn btn-info" value="输入按钮">
        <input type="submit" class="btn btn-info" value="提交按钮">
        <br>
        <!-- 按钮组 -->
        <div class="btn-group">
            <button type="button" class="btn btn-primary">文件</button>
            <button type="button" class="btn btn-primary">编辑</button>
            <button type="button" class="btn btn-primary">查询</button>
        </div>
        <!-- 垂直排列的按钮组 -->
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-primary">文件</button>
            <button type="button" class="btn btn-primary">编辑</button>
            <button type="button" class="btn btn-primary">查询</button>
        </div>
        <!-- 按钮组内嵌入下拉菜单 -->
        <div class="btn-group">
            <!-- <button type="button" class="btn btn-primary">文件</button> -->
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">文件</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">新建</a>
                    <a class="dropdown-item">保存</a>
                    <button type="button" class="btn btn-primary">打开</button>
                </div>
            </div>
            <button type="button" class="btn btn-primary">编辑</button>
            <button type="button" class="btn btn-primary">查询</button>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                    data-toggle="dropdown" aria-haspopup="true">
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item">新增</a>
                    <a class="dropdown-item">同步</a>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="进度条">进度条</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="progress">
            <div class="progress-bar" style="width:60%;">60%-普通进度条</div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-warning" style="width:60%">60%-指定背景色的进度条</div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-striped" style="width:40%">40%-带条纹的进度条</div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%">40%-动画进度条</div>
        </div>
        <div class="progress">
            <div class="progress-bar bg-success" style="width: 40%">40%</div>
            <div class="progress-bar bg-warning" style="width: 30%">40%</div>
            <div class="progress-bar bg-danger" style="width: 20%">20%</div>
            <div class="progress-bar bg-dark" style="width: 10%">10%</div>
        </div>
    </div>
    <hr>
    <h1 id="分页">分页</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">上一页</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <!-- 选中项 -->
            <li class="page-item active"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">下一页</a></li>
        </ul>
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">上一页</a></li>
            <li class="breadcrumb-item"><a href="#">1</a></li>
            <li class="breadcrumb-item"><a href="#">2</a></li>
            <li class="breadcrumb-item"><a href="#">3</a></li>
            <li class="breadcrumb-item"><a href="#">下一页</a></li>
        </ul>
    </div>
    <hr>
    <h1 id="列表组">列表组</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <ul class="list-group">
            <li class="list-group-item">正常状态的列表项</li>
            <li class="list-group-item active">激活状态的列表项</li>
            <li class="list-group-item disabled">禁用状态的列表项</li>
            <a class="list-group-item list-group-item-action" href="#">链接形式的列表项</a>
            <li class="list-group-item list-group-item-danger">具有颜色的列表项</li>
            <a class="list-group-item list-group-item-action list-group-item-dark" href="#">具有颜色的链接形式的列表项</a>
        </ul>
    </div>
    <hr>
    <h1 id="卡片">卡片</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px; ">
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col" style="background-color: coral;">
                <div class="card bg-light img-fluid">
                    <div class="card-header">普通卡片</div>
                    <div class="card-body">卡片内容<br>卡片内容<br>卡片内容</div>
                    <div class="card-footer">卡片底部</div>
                </div>
            </div>
            <div class="col" style="background-color: brown;">
                <div class="card bg-light img-fluid">
                    <div class="card-header">普通卡片</div>
                    <div class="card-body">
                        卡片内容<br>卡片内容<br>
                        <a href="#" class="card-link">About1</a>
                        <a href="#" class="card-link">About2</a>
                    </div>
                    <div class="card-footer">卡片底部</div>
                </div>
            </div>
            <div class="col" style="background-color: green;">
                <div class="card bg-light img-fluid">
                    <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image"
                        style="width:100%">
                    <div class="card-img-overlay">
                        <h4 class="card-title">Somebody</h4>
                        <p class="card-text">We find someone here.</p>
                        <a href="#" class="card-link">About1</a>
                        <a href="#" class="card-link">About2</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="下拉菜单">下拉菜单</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="row" style="border: black;border: 2px solid black; margin: 3px;">
            <div class="col" style="background-color: coral;">
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
                        Dropdown button
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Link 3</a>
                        <a class="dropdown-item" href="#">Link 4</a>
                        <div class="dropdown-header">Dropdown header 1</div>
                        <a class="dropdown-item" href="#">Link 5</a>
                    </div>
                </div>
            </div>
            <div class="col" style="background-color: brown;">
                <div class="dropdown dropright">
                    <button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
                        Dropdown button
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Link 3</a>
                        <a class="dropdown-item" href="#">Link 4</a>
                        <div class="dropdown-header">Dropdown header 1</div>
                        <a class="dropdown-item" href="#">Link 5</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="折叠">折叠</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#coll1">折叠btn</button>
        <a class="btn btn-primary" data-toggle="collapse" href="#coll2">折叠a</a>
        <div id="coll1" class="collapse">千山鸟飞绝 万径人踪灭<br>孤舟蓑笠翁 独钓寒江雪</div>
        <div id="coll2" class="collapse show">会当凌绝顶 一览众山小</div>
        <div id="collapse-parent">
            <h4>手风琴演示</h4>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" href="#coll-01" data-toggle="collapse">柳宗元</a>
                </div>
                <div id="coll-01" class="collapse" data-parent="#collapse-parent">
                    <div class="card-body">千山鸟飞绝 万径人踪灭</div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" href="#coll-02" data-toggle="collapse">杜甫</a>
                </div>
                <div id="coll-02" class="collapse show" data-parent="#collapse-parent">
                    <div class="card-body">会当凌绝顶 一览众山小</div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <a class="card-link" href="#coll-03" data-toggle="collapse">李白</a>
                </div>
                <div id="coll-03" class="collapse" data-parent="#collapse-parent">
                    <div class="card-body">举杯邀明月 对影成三人</div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="导航">导航</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">唐诗</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">宋词</a>
            </li>
        </ul>
        <ul class="nav justify-content-center">
            <li class="nav-item">
                <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">唐诗</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">宋词</a>
            </li>
        </ul>
        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">唐诗</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">宋词</a>
            </li>
        </ul>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">唐诗</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">宋词</a>
            </li>
        </ul>
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#home">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#tangshi">唐诗</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#songci">宋词</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#xiandaishici">现代诗词</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active container" id="home">唐诗、宋词、现代诗词</div>
            <div class="tab-pane fade container" id="tangshi">举杯邀明月 对影成三人</div>
            <div class="tab-pane fade container" id="songci">大江东去浪淘尽</div>
            <div class="tab-pane fade container" id="xiandaishici">轻轻的我走了</div>
        </div>
        <ul class="nav nav-pills nav-justified">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#homep">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#tsp">唐诗</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#scp">宋词</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#xdscp">现代诗词</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active container" id="homep">唐诗、宋词、现代诗词...</div>
            <div class="tab-pane fade container" id="tsp">举杯邀明月 对影成三人...</div>
            <div class="tab-pane fade container" id="scp">大江东去浪淘尽...</div>
            <div class="tab-pane fade container" id="xdscp">轻轻的我走了...</div>
        </div>
    </div>
    <hr>
    <h1 id="导航栏">导航栏</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <nav class="navbar navbar-expand-sm bg-light fixed-top" id="navbartop001">
            <ul class="navbar-nav">
                <a class="navbar-brand" href="#">
                    <img src="https://static.runoob.com/images/mix/bird.jpg" alt="" style="width: 35px;">
                </a>
                <li class="nav-item">
                    <a class="nav-link active" href="#网格布局">网格布局</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#文字排版">文字排版</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#表格">表格</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#图像形状">图像形状</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#按钮">按钮</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#进度条">进度条</a>
                </li>
                <!-- dropdown -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">BootStrap</a>
                    <div class="dropdown-menu">
                        <!-- <a class="dropdown-item" href="#网格布局">网格布局</a>
                        <a class="dropdown-item" href="#文字排版">文字排版</a>
                        <a class="dropdown-item" href="#表格">表格</a>
                        <a class="dropdown-item" href="#图像形状">图像形状</a>
                        <a class="dropdown-item" href="#按钮">按钮</a>
                        <a class="dropdown-item" href="#进度条">进度条</a> -->
                        <a class="dropdown-item" href="#分页">分页</a>
                        <a class="dropdown-item" href="#列表组">列表组</a>
                        <a class="dropdown-item" href="#卡片">卡片</a>
                        <a class="dropdown-item" href="#下拉菜单">下拉菜单</a>
                        <a class="dropdown-item" href="#折叠">折叠</a>
                        <a class="dropdown-item" href="#导航">导航</a>
                        <a class="dropdown-item" href="#导航栏">导航栏</a>
                        <a class="dropdown-item" href="#表单">表单</a>
                        <a class="dropdown-item" href="#表单控件">表单控件</a>
                        <a class="dropdown-item" href="#输入框组">输入框组</a>
                        <a class="dropdown-item" href="#自定义表单">自定义表单</a>
                        <a class="dropdown-item" href="#轮播">轮播</a>
                        <a class="dropdown-item" href="#弹框">弹框</a>
                        <a class="dropdown-item" href="#小工具">小工具</a>
                        <a class="dropdown-item" href="#弹性布局">弹性布局</a>
                        <a class="dropdown-item" href="#多媒体">多媒体</a>
                    </div>
                </li>
            </ul>
            <span class="navbar-text">BootStrap 演示代码</span>
        </nav>
        <nav class="navbar bg-light">
            <ul class="navbar-nav">
                <a class="navbar-brand" href="#">Logo</a>
                <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="#">唐诗</a></li>
                <li class="nav-item"><a class="nav-link" href="#">宋词</a></li>
                <li class="nav-item"><a class="nav-link" href="#">现代诗词</a></li>
            </ul>
        </nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active">Data</li>
        </ol>
    </div>
    <hr>
    <h1 id="表单">表单</h1>
    <div class="container" style="background-color: lightblue; padding: 3px;">
        <div class="row">
            <div class="col btn-group-vertical" style="background-color: coral;">
                <form action="get">
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" placeholder="输入邮箱地址">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="输入密码">
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input">记住密码
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
            <div class="col btn-group-vertical" style="background-color: brown;">
                <form action="post" class="form-inline">
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" placeholder="输入邮箱地址">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="输入密码">
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input">记住密码
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="表单控件">表单控件</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="row">
            <div class="col">
                <form action="">
                    <div class="form-group">
                        <label for="usr">用户名：</label>
                        <input type="text" class="form-control" id="usr">
                        <label for="pwd">密码：</label>
                        <input type="password" class="form-control" id="pwd">
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <div class="form-group">
                        <label for="comment">评论：</label>
                        <textarea name="" id="comment" cols="30" rows="10" class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <label for="">选择编码：</label>
                    <div class="form-check">
                        <label for="" class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="">UTF-8</input>
                        </label>
                    </div>
                    <div class="form-check">
                        <label for="" class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="">UTF-16</input>
                        </label>
                    </div>
                    <div class="form-check disabled">
                        <label for="" class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="" disabled>GB2312</input>
                        </label>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <label for="">选择编码：</label>
                    <br>
                    <div class="form-check form-check-inline">
                        <label for="" class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="">UTF-8</input>
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <label for="" class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="">UTF-16</input>
                        </label>
                    </div>
                    <div class="form-check form-check-inline disabled">
                        <label for="" class="form-check-label">
                            <input type="checkbox" class="form-check-input" value="" disabled>GB2312</input>
                        </label>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <label for="">选择编码:</label>
                    <br>
                    <div class="radio">
                        <label for="">
                            <input type="radio" name="codec">GBK</input>
                        </label>
                    </div>
                    <div class="radio">
                        <label for="">
                            <input type="radio" name="codec">UTF-8</input>
                        </label>
                    </div>
                    <div class="radio disabled">
                        <label for="">
                            <input type="radio" name="codec" disabled>UNICODE</input>
                        </label>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <label for="">选择编码:</label>
                    <br>
                    <label for="" class="radio-inline">
                        <input type="radio" name="codec">GBK</input>
                    </label>
                    <label for="" class="radio-inline">
                        <input type="radio" name="codec">UTF-8</input>
                    </label>
                    <label for="" class="radio-inline">
                        <input type="radio" name="codec" disabled>UNICODE</input>
                    </label>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <div class="form-group">
                        <label for="select-1">选择编码：</label>
                        <select name="" id="select-1" class="form-control">
                            <option value="">GBK</option>
                            <option value="">UTF-8</option>
                            <option value="">UNICODE</option>
                        </select>
                        <label for="select-2">选择标签：</label>
                        <select name="" id="select-2" class="form-control" multiple>
                            <option value="">数学</option>
                            <option value="">物理</option>
                            <option value="">化学</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="输入框组">输入框组</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="row">
            <div class="col">
                <form action="">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <select name="" id="select-1" class="form-control">
                                <option value="">http</option>
                                <option value="">https</option>
                            </select>
                            <span class="input-group-text">://www.</span>
                        </div>
                        <input type="text" name="" id="" class="form-control" placeholder="网站地址">
                        <div class="input-group-aappend">
                            <span class="input-group-text">.com</span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <div class="input-group">
                        <div class="input-group-append">
                            <span class="input-group-text">用户名:</span>
                        </div>
                        <input type="text" id="" class="form-control" placeholder="用户名">
                        <div class="input-group-append">
                            <button type="submit" class="btn btn-primary">检测</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <div class="input-group">
                        <label class="input-group-text" for="username">输入用户名：</label>
                        <input type="text" id="username" class="form-control" placeholder="用户名">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="自定义表单">自定义表单</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="row">
            <div class="col">
                <form action="">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" id="custom-cb" class="custom-control-input" name="cb01">
                        <label for="custom-cb" class="custom-control-label">自定义复选框1</label>
                    </div>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" id="custom-cb2" class="custom-control-input" name="cb01">
                        <label for="custom-cb2" class="custom-control-label">自定义复选框2</label>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <div class="custom-control custom-radio">
                        <input type="radio" id="custom-rd" class="custom-control-input" name="exprd">
                        <label for="custom-rd" class="custom-control-label">自定义单选框1</label>
                    </div>
                    <div class="custom-control custom-radio">
                        <input type="radio" id="custom-rd2" class="custom-control-input" name="exprd">
                        <label for="custom-rd2" class="custom-control-label">自定义单选框2</label>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="custom-rd5" class="custom-control-input" name="exprd2">
                        <label for="custom-rd5" class="custom-control-label">自定义单选框1</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                        <input type="radio" id="custom-rd6" class="custom-control-input" name="exprd2">
                        <label for="custom-rd6" class="custom-control-label">自定义单选框2</label>
                    </div>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <select class="custom-control custom-select">
                        <option value="gbk">GBK</option>
                        <option value="utf8" selected>UFT-8</option>
                        <option value="unicode">UNICODE</option>
                    </select>
                    <select class="form-control">
                        <option value="gbk">GBK</option>
                        <option value="utf8" selected>UFT-8</option>
                        <option value="unicode">UNICODE</option>
                    </select>
                </form>
            </div>
            <div class="col">
                <form action="">
                    <label for="">自定义滑块:</label>
                    <input type="range" class="custom-range">
                    <label for="">默认滑块:</label>
                    <input type="range" class="form-range">
                </form>
            </div>
            <div class="col">
                <form action="">
                    <label for="">自定义文件上传:</label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="customFile">
                        <label class="custom-file-label" for="customFile">选择文件</label>
                    </div>
                    <label for="">默认文件上传:</label>
                    <input type="file" class="form-control-file">
                </form>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="轮播">轮播</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="row">
            <div class="col-3" style="background-color: green;">
                <div id="demo-carousel" class="carousel slide" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li data-target="#demo-carousel" data-slide-to="0" class="active"></li>
                        <li data-target="#demo-carousel" data-slide-to="1"></li>
                        <li data-target="#demo-carousel" data-slide-to="2"></li>
                        <li data-target="#demo-carousel" data-slide-to="3"></li>
                    </ul>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="">
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/bird.jpg" alt="">
                        </div>
                    </div>
                    <a href="#demo-carousel" data-slide="prev" class="carousel-control-prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a href="#demo-carousel" data-slide="next" class="carousel-control-next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
            <div class="col-3" style="background-color: coral;">
                <div id="demo-carousel2" class="carousel slide" data-ride="carousel">
                    <ul class="carousel-indicators">
                        <li data-target="#demo-carousel2" data-slide-to="0" class="active"></li>
                        <li data-target="#demo-carousel2" data-slide-to="1"></li>
                        <li data-target="#demo-carousel2" data-slide-to="2"></li>
                        <li data-target="#demo-carousel2" data-slide-to="3"></li>
                    </ul>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" alt="">
                            <div class="carousel-caption">
                                <h5>First Picture</h5>
                                <p>this is the first picture.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" alt="">
                            <h5>Second Picture</h5>
                            <p>this is the second picture.</p>
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="">
                            <h5>Third Picture</h5>
                            <p>this is the third picture.</p>
                        </div>
                        <div class="carousel-item">
                            <img src="https://static.runoob.com/images/mix/bird.jpg" alt="">
                            <h5>Forth Picture</h5>
                            <p>this is the forth picture.</p>
                        </div>
                    </div>
                    <a href="#demo-carousel2" data-slide="prev" class="carousel-control-prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a href="#demo-carousel2" data-slide="next" class="carousel-control-next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="弹框">弹框</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="row">
            <!-- 模态弹窗 -->
            <div class="col">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mymodal">打开模态窗</button>
                <div class="modal fate" id="mymodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">当前时间：</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <p>
                                    春眠不觉晓，处处闻啼鸟。<br>
                                    夜来风雨声，花落知多少。
                                </p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <a href="#" data-toggle="tooltip" title="鼠标提示内容" data-placement="bottom">鼠标移动提示内容</a>
                <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
                    title="Tooltip on top">
                    Tooltip on top
                </button>
                <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true"
                    title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
                    Tooltip with HTML
                </button>
                <script>
                    $(document).ready(function () {
                        $('[data-toggle="tooltip"]').tooltip();
                    });
                </script>
            </div>
            <div class="col">
                <a href="#弹框" data-toggle="popover" title="Pop title" data-content="Pop Content">popover</a>
                <a href="#弹框" data-toggle="popover" data-trigger="focus" title="Pop title"
                    data-content="Pop Content">Focus</a>
                <a href="#弹框" data-toggle="popover" data-trigger="hover" title="Pop title"
                    data-content="Pop Content">hover</a>
                <script>
                    $(document).ready(function () {
                        $('[data-toggle="popover"]').popover();
                    });
                </script>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="滚动监听">滚动监听</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">

    </div>
    <hr>
    <h1 id="小工具">小工具</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <style>
            .spanx {
                display: inline-block;
                width: 70px;
                height: 70px;
                margin: 6px;
                background-color: coral;
            }
        </style>
        <div class="row">
            <div class="col">
                <span class="spanx border">边框</span>
                <span class="spanx border border-0">无边框</span>
                <span class="spanx border border-left-0">边框</span>
                <span class="spanx border border-danger">边框颜色</span>
                <span class="spanx rounded">圆角边框</span>
                <span class="spanx float-left">左浮动</span>
                <span class="spanx float-right">右浮动</span>
            </div>
        </div>
    </div>
    <hr>
    <h1 id="弹性布局">弹性布局</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <!--  -->
    </div>
    <hr>
    <h1 id="多媒体">多媒体</h1>
    <div class="container-fluid" style="background-color: lightblue; padding: 3px;">
        <div class="media border">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="">
            <div class="meia-body">
                <p>
                    春眠不觉晓，处处闻啼鸟。<br>
                    夜来风雨声，花落知多少。
                </p>
            </div>
        </div>
    </div>
</body>

<footer>
    <h4>千山鸟飞绝 万径人踪灭</h4>
</footer>

</html>